<template>
  <div class="roles_content users_content">
    <div class="card-container">
    <div class="header">
      <el-form
        class="demo-form-inline"
        size="mini"
        label-position="right"
        label-width="100px"
        ref="queryRoleRef"
        :model="formOptions"
      >
        <div class="row">
          <div class="col">
            <el-form-item label="岗位名称" prop="name">
              <el-input
                v-model="formOptions.name"
                placeholder="岗位名称"
                clearable
              ></el-input>
            </el-form-item>
          </div>
          <div class="col">
            <el-form-item label="项目名" prop="project">
              <el-select
                v-model="formOptions.project"
                placeholder="请选择项目名"
                filterable
                clearable
                :loading="loading"
                @focus="queryProject"
              >
                <el-option
                  v-for="item in projectData"
                  :key="item.index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col">
            <el-form-item label="办公地点" prop="address">
              <el-select
                v-model="formOptions.address"
                placeholder="请选择办公地点"
                filterable
                clearable
                :loading="loading"
                @focus="queryRegion"
              >
                <el-option
                  v-for="item in regionData"
                  :key="item.index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col"></div>
          <!-- <el-col :span="5">
            <el-form-item label="岗位技能" prop="skill">
              <el-select
                v-model="formOptions.skill"
                placeholder="请选择岗位技能"
                filterable
                clearable
              >
                <el-option
                  v-for="item in skill"
                  :key="item.index"
                  :label="item.ski"
                  :value="item.ski"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <div
          style="width:250px"
          >
           
              <el-button class="header-btn" type="primary" size="mini" @click="resetForm('queryRoleRef')"
                >
                <img src="../../../assets/img/globalTable/icon2-reset.png" alt="">
                重置</el-button
              >
              <el-button class="header-btn" type="primary" size="mini" @click="queryPostclick">
                <img src="../../../assets/img/globalTable/icon1-search.png" alt="">
                查询</el-button>
              <el-button class="header-btn" type="primary" size="mini" @click="addClick">
                <img src="../../../assets/img/globalTable/icon3-add.png" alt="">
                新增</el-button>
          
          </div>
        </div>
      </el-form>
    </div>
    <el-card >
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        size="mini"
        :height="tableHeight"
      >
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column
          label="岗位名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="岗位技能"
          prop="skill"
        ></el-table-column>
        <el-table-column
          label="项目"
          prop="project"
        ></el-table-column>
        <el-table-column
          label="办公地点"
          prop="address"
        ></el-table-column>
        <el-table-column
          label="客户"
          prop="customerName"
        ></el-table-column>
        <el-table-column
          label="需求人数/人"
          prop="number"
        ></el-table-column>
        <el-table-column
          label="计划满足日期"
          prop="date"
        ></el-table-column>
        <!-- <el-table-column
          label="最晚到岗日期"
          prop="latestArrivalTime"
          min-width="100"
          fixed
        ></el-table-column> -->
        <el-table-column
          label="截止今日岗位缺口/人"
          prop="number"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row, $index }">
            <span class="operate-btn" @click="lookClick(row)" type="primary" size="mini"
              >查看</span
            >
            <span class="operate-btn" @click="onEditRole(row)" type="primary" size="mini"
              >编辑</span
            >
            <span class="operate-btn"
              type="primary"
              size="mini"
              @click="deleteMenu(row, $index)"
            >
              删除
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paginationOptions.pageNo"
          :page-sizes="paginationOptions.pageSizes"
          :page-size="paginationOptions.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationOptions.total"
          size="mini"
        >
        </el-pagination>
      </div>
    </el-card>
    </div>
    <post-edit-dialog
      :toChild="list"
      :projectData="projectData"
      :regionData="regionData"
      ref="roleEditDialogRef"
    ></post-edit-dialog>
    <post-detail-dialog
      :toChild="list"
      ref="roleDataDialogRef"
    ></post-detail-dialog>
  </div>
</template>

<script>
// 岗位表/删除
import { queryPost, deletesPost } from "@/api/post";
// 分页查询项目表
import { queryProject } from "@/api/project";
// 地域
import { queryRegion } from "@/api/region";
//客户
import { queryCustomer } from "@/api/customer";
// 接口人
import { queryInterface } from "@/api/interface";
import PostEditDialog from "@/views/app/post/dialog/dialogEdit.vue";
import PostDetailDialog from "@/views/app/post/dialog/dialogDetails.vue";
export default {
  components: {
    PostEditDialog,
    PostDetailDialog,
  },
  data() {
    return {
      queryPostAll: [],
      list: "",
      formOptions: {
        address: "",
        date: "",
        detailAddress: "",
        latestArrivalTime: "",
        number: "",
        position: "",
        id: "",
        name: "",
        project: "",
        requirements: "",
        skill: "",
        customer: "",
        customerId: "",
        customerName: "",
      },
      tableData: [],
      // 项目数据
      projectData: [],
      // 地域数据
      regionData: [],
      // 客户
      customerData: [],
      paginationOptions: {
        pageNo: 1,
        pageSizes: [10, 20, 30, 50, 100],
        pageSize: 10,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      // 验证
      rules: {},
      loading:false
    };
  },
  computed: {
    tableHeight() {
      return this.$store.state.tableHeight-440;
    }
  },
  mounted() {
    this.queryPost();
    this.queryProject()
    this.queryRegion()
  },
  methods: {
    // 头部搜索
    // 头部搜索
    queryProject(){
      this.loading=true
      queryProject({current:1,size:1000000,records: [{ ...this.formOptions }]}).then(res=>{
        if (res && res.code && res.code === "00000") {
          console.log("2333333");
          this.loading=false
          this.projectData=res.data.records
        }
      })
    },
    queryRegion(){
      this.loading=true
      queryRegion({current:1,size:1000000,records: [{ ...this.formOptions }]}).then(res=>{
        if (res && res.code && res.code === "00000") {
          this.loading=false
          this.regionData=res.data.records
        }
      })
    },
    // 手动 查询 岗位表
    queryPostclick() {
        this.paginationOptions.pageNo = 1;
        this.queryPost();
    },
    // 查询 岗位表
    queryPost() {
          let data = { records: [{ ...this.formOptions }] };
          data.current = this.paginationOptions.pageNo;
          data.size = this.paginationOptions.pageSize;
          queryPost(data).then((res) => {
            this.tableData = res.data.records; // 表格数据赋值
            this.paginationOptions.total = res.data.total; // 分页器赋值
            this.paginationOptions.pageNo=res.data.current
          });
    },
    // 删除弹框
    deleteMenu(row, index) {
      this.$confirm("此操作将永久删除该岗位, 是否继续?", "删除岗位", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
        modal: false,
      })
        .then(() => {
          // 点击确认，发起后台请求，删除该用户
          deletesPost(row.id).then((res) => {
            console.log(res, "点击确认，发起后台请求，删除");
            if (res && res.code && res.code === "00000") {
              this.queryPost();
              return this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          // 点击取消，取消该操作
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看
    lookClick(row) {
      this.$refs.roleDataDialogRef.openDialog(row);
      this.list = "查看岗位详情";
      console.log("我要查看", row);
    },
    // 添加
    addClick() {
      this.$refs.roleEditDialogRef.openDialog();
      this.list = "添加岗位";
      console.log("我要添加");
    },
    // 编辑
    onEditRole(row) {
      this.$refs.roleEditDialogRef.openDialog(row);
      this.list = "编辑岗位信息";
      console.log("编辑", row, row.id);
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // // 表格复选动作
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    // 分页器 页容量变更行为
    handleSizeChange(val) {
      this.paginationOptions.pageSize = val;
      this.queryPost();
    },
    // 分页器 页码变更行为
    handleCurrentChange(val) {
      this.paginationOptions.pageNo = val;
      this.queryPost();
    },
    indexMethod(index) {
      return (
        (this.paginationOptions.pageNo - 1) * this.paginationOptions.pageSize +
        index +
        1
      );
    },
  },
};
</script>
<style lang='less'>
// .btn-custom-cancel {
//   float: right;
//   margin-left: 10px;
// }
</style>

<style lang="less" scoped>
::v-deep .el-col-9 {
  text-align: right;
}
.el-form--inline .el-form-item {
  margin-right: 0;
}

@media screen and (min-width: 1800px) {
  ::v-deep .el-card__body::-webkit-scrollbar {
    display: none;
  }
}
::v-deep .el-card__body {
  // overflow-x: scroll;

  .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
// .el-breadcrumb {
//   margin-bottom: 25px;
// }


::v-deep .el-col-5 {
  overflow: hidden;
}
.demo-form-inline {
  // min-width: 1300px;
}
</style>
